<template>
  <div class="analytics-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="overview-card">
          <template #header>
            <div class="card-header">
              <span>用户行为分析概览</span>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :shortcuts="dateShortcuts"
                @change="handleDateChange"
              />
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">总访问量</div>
                <div class="stat-value">{{ statistics.totalVisits }}</div>
                <div class="stat-trend" :class="{ 'up': statistics.visitTrend > 0 }">
                  {{ statistics.visitTrend > 0 ? '+' : '' }}{{ statistics.visitTrend }}%
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">活跃用户</div>
                <div class="stat-value">{{ statistics.activeUsers }}</div>
                <div class="stat-trend" :class="{ 'up': statistics.userTrend > 0 }">
                  {{ statistics.userTrend > 0 ? '+' : '' }}{{ statistics.userTrend }}%
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">平均停留时间</div>
                <div class="stat-value">{{ statistics.avgDuration }}分钟</div>
                <div class="stat-trend" :class="{ 'up': statistics.durationTrend > 0 }">
                  {{ statistics.durationTrend > 0 ? '+' : '' }}{{ statistics.durationTrend }}%
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">操作次数</div>
                <div class="stat-value">{{ statistics.totalActions }}</div>
                <div class="stat-trend" :class="{ 'up': statistics.actionTrend > 0 }">
                  {{ statistics.actionTrend > 0 ? '+' : '' }}{{ statistics.actionTrend }}%
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>访问趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <el-table :data="visitTrendData" style="width: 100%">
              <el-table-column prop="date" label="日期" width="120" />
              <el-table-column prop="visits" label="访问量" width="120" />
              <el-table-column prop="users" label="活跃用户" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户行为分布</span>
            </div>
          </template>
          <div class="chart-container">
            <el-table :data="actionDistributionData" style="width: 100%">
              <el-table-column prop="name" label="操作类型" width="120" />
              <el-table-column prop="value" label="次数" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>热门操作排行</span>
            </div>
          </template>
          <div class="chart-container">
            <el-table :data="hotActionsData" style="width: 100%">
              <el-table-column prop="name" label="操作" width="120" />
              <el-table-column prop="value" label="次数" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户活跃度分析</span>
            </div>
          </template>
          <div class="chart-container">
            <el-table :data="userActivityData" style="width: 100%">
              <el-table-column prop="hour" label="时间" width="120" />
              <el-table-column prop="value" label="活跃度" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户行为日志</span>
            </div>
          </template>
          <el-table :data="actionLogs" style="width: 100%" height="400">
            <el-table-column prop="timestamp" label="时间" width="180" />
            <el-table-column prop="username" label="用户" width="120" />
            <el-table-column prop="action" label="操作" width="150" />
            <el-table-column prop="resource" label="资源" width="150" />
            <el-table-column prop="details" label="详情" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === '成功' ? 'success' : 'danger'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { generateMockAnalyticsData } from '@/utils/mockData'

// 日期范围选择
const dateRange = ref([])
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]

// 统计数据
const statistics = ref({
  totalVisits: 0,
  visitTrend: 0,
  activeUsers: 0,
  userTrend: 0,
  avgDuration: 0,
  durationTrend: 0,
  totalActions: 0,
  actionTrend: 0
})

// 表格数据
const visitTrendData = ref([])
const actionDistributionData = ref([])
const hotActionsData = ref([])
const userActivityData = ref([])
const actionLogs = ref([])

// 生成模拟数据
const generateData = () => {
  const mockData = generateMockAnalyticsData()
  
  // 更新统计数据
  statistics.value = mockData.statistics
  
  // 更新访问趋势数据
  visitTrendData.value = mockData.visitTrend.dates.map((date, index) => ({
    date,
    visits: mockData.visitTrend.visits[index],
    users: mockData.visitTrend.users[index]
  }))
  
  // 更新行为分布数据
  actionDistributionData.value = mockData.actionDistribution
  
  // 更新热门操作排行数据
  hotActionsData.value = mockData.hotActions
  
  // 更新用户活跃度数据
  userActivityData.value = mockData.userActivity.hours.map((hour, index) => ({
    hour,
    value: mockData.userActivity.values[index]
  }))
  
  // 更新行为日志
  actionLogs.value = mockData.actionLogs
}

// 处理日期变化
const handleDateChange = () => {
  generateData()
}

// 组件挂载时生成数据
onMounted(() => {
  generateData()
})
</script>

<style scoped>
.analytics-container {
  padding: 20px;
}

.chart-row {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-card {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
  text-align: center;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.stat-trend {
  font-size: 12px;
  color: #f56c6c;
}

.stat-trend.up {
  color: #67c23a;
}

.chart-container {
  height: 400px;
  overflow-y: auto;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style> 